<template>
  <div class="tabs-item" ref="orderListScorll">
    <div class="no-info" v-if="!orderData.length">暂无信息</div>
    <scroll :data="orderData" v-else>
      <ul class="order-list">
        <li
          v-for="item in orderData"
          class="item">
          <div class="hd">
            <div class="left">订单号: {{item.order_id}}</div>
            <!-- <div v-if="item.enable_cancel==1" class="right" @click.stop.prevent="orderCancel(item.order_id)">取消订单</div> -->
            <div class="right">{{item.add_time * 1000 | formatDate}}</div>
          </div>
          <router-link tag="div" class="bd" :to="'/order_detail?id=' + item.order_id">
            <div class="left">
              <ul class="product-list">
                <li class="item" v-for="val in item.items">
                  <div class="thumb">
                    <img :src="val.show_image">
                  </div>
                  <div class="product-info">
                    <div class="title">{{val.product_name}}</div>
                    <div class="gift" v-if="val.spec_name">{{val.spec_name}}</div>
                    <div class="number">X{{val.quantity}}</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="right">
              <span class="order_status">{{item.status_txt}}</span>
            </div>
          </router-link>
          <!-- <router-link tag="div" class="bd" :to="'/order_detail?id=' + item.order_id">
            <ul class="product-list">
              <li class="item" v-for="val in item.items">
                <div class="thumb">
                  <img :src="val.show_image">
                </div>
                <span class="number">{{val.quantity}}</span><p class="title">{{val.product_name}}</p>
              </li>
            </ul>
            <div class="right">
              <span class="order_status">{{item.status_txt}}</span>
            </div>
          </router-link> -->
          <div class="ft" v-if="item.enable_pay==1">
            <div class="left"><span class="price">总价: {{item.total_price | formatMoney}}</span></div>
            <div class="right"><router-link class="btn btn-red" :to="'/order_detail?id=' + item.order_id">去付款</router-link></div>
          </div>
          <div class="ft" v-if="item.enable_received==1">
            <div class="left"><span class="price">总价: {{item.total_price | formatMoney}}</span></div>
            <div class="right"><span class="btn btn-green" @click="orderReceived(item.order_id)">确认收货</span></div>
          </div>
        </li>
      </ul>
    </scroll>
  </div>
</template>
<script>
import Scroll from './base/scroll'
import $http from '@/api'
import {formatDate, formatMoney} from '@/utils'
export default {
  props: {
    datas: {
      Object
    },
    type: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {}
  },
  computed: {
    orderData() {
      return this.datas
    }
  },
  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    },
    formatMoney(number) {
      return formatMoney(number, '￥')
    }
  },
  methods: {
    orderReceived(id) {
      this.$layer.footer({
        content: '已确定收货吗?',
        btn: ['取消', '确定'],
        time: 0
      }).then(res => {
        if (res === 1) {
          $http.orderReceived(id)
          .then(res => {
            if (res.code === 0) {
              this.$emit('orderReceived', this.type)
              this.$layer.toast({
                content: '已确认收货！',
                time: 2000
              })
            }
          })
        } else {
          console.log('不取消')
        }
       })
    }
  },
  components: {
    Scroll
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/orderlist';
</style>
